<template>
  <div class="sub-serve-detail">
    <div class="detail-content server-common-card">
      <div class="serve-title">
        <span><em>子任务</em><b>{{currentSubServeInfo.stName}}</b></span>
        <i :class="['tag',{'green':currentSubServeInfo.stState==='1'}]">{{currentSubServeInfo.stState==='1'?'待执行':'已执行'}}</i>
      </div>
      <div class="serve-content">
        <h3><span>任务描述</span></h3>
        <p>{{currentSubServeInfo.stContent}}</p>
        <h3><span>执行人</span></h3>
        <div class="person"><span>{{currentSubServeInfo.stPerson}}</span></div>
        <h3><span>周期</span></h3>
        <span class="date"><b>{{currentSubServeInfo.updatetime}}-{{currentSubServeInfo.updatetime}}</b></span>
        <strong v-if="currentSubServeInfo.stFinishTime">最近一次执行时间：{{currentSubServeInfo.stFinishTime}}</strong>
        <h3><span>执行信息</span></h3>
        <div class="serve-steps">
          <van-steps 
            direction="vertical"
            active="false"
          >
            <van-step>
              <div class="step-item">
                <h4>{{currentSubServeInfo.stFinishTime}}</h4>
                <p>{{currentSubServeInfo.stFinishContent}}</p>
                <div class="img-list">
                  <div 
                    class="img-item" 
                    v-for="item in images" 
                    :key="item" 
                    @click="handleImgPreviewShow"
                  >
                    <img :src="item" alt="">
                  </div>
                </div>
              </div>
            </van-step>
            <van-step v-if="currentSubServeInfo.stBackTime">
              <div class="step-item">
                <h4>{{currentSubServeInfo.stBackTime}}</h4>
                <p>{{currentSubServeInfo.stContent}}</p>
              </div>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>
    <van-image-preview v-model="imgPreviewShow" :images="images"></van-image-preview>
  </div>
</template>

<script>
import {
	mapState
} from 'vuex'
export default {
  name: "subServeDetail",
  data(){
    return {
      imgBaseUrl: process.env.VUE_APP_IMG_URL,
      imgPreviewShow:false
    }
  },
  computed:{
		...mapState({
			currentSubServeInfo: state=>state.serve.currentSubServeInfo,
		}),
    images:function(){
      return [`${this.imgBaseUrl}${this.currentSubServeInfo.stFinishPic}`]
    }
	},
  methods:{
    handleImgPreviewShow(){
      this.imgPreviewShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/variable.scss";
.sub-serve-detail{
  height: 100%;
  background: $bg-gray;
  box-sizing: border-box;
  padding: 50px;
  .detail-content{
    width: 100%;
    height: 100%;
    padding: 20px 50px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    .serve-title{
      @include flexCenter;
      justify-content: space-between;
      .tag{
        font-size: 20px;
        background: #F45656;
        color: #fff;
        padding: 1px 5px;
        border-radius: 4px;
        &.green{
          background: #27BA0F;
        }
      }
    }
    .serve-content{
      height: calc(100% - 140px);
      overflow: auto;
      .serve-steps{
        .step-item{
          h4{
            font-size: 22px;
            color: #333;
          }
          p{
            font-size: 22px;
            color: #333;
          }
          .img-list{
            @include flexCenter;
            justify-content: flex-start;
            .img-item{
              width: 150px;
              height: 150px;
              border-radius: 10px;
              overflow: hidden;
              @include flexCenter;
              background: rgba(0,0,0,.05);
              border: 1px solid rgba(0,0,0,.05);
              margin-right: 20px;
              img{
                display: block;
                max-width: 100%;
                max-height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>